<template>
	<div class="main-content">
		<div class="information-form">
			<h3>楼盘动态详情</h3>
			<ul class="housing-list">
				<li>
					<div class="list-info-template col-md-6">
						<label class="control-label" for="">楼盘动态标题:</label>
						<div class="control-details">
							<input type="text" name="title" class="form-control" style="width:100%; height: 40px;" placeholder="楼盘动态标题" v-model="dynamic.title">
						</div>
					</div>
				</li>
				<li>
					<div class="list-info-template col-md-6">
						<label class="control-label" for="">楼盘名称:</label>
						<div class="control-details">
							<el-select class="" v-model="dynamic.premisesId" filterable placeholder="请选择" clearable="true" style="width:100%">
								<el-option
								v-for="item in premisesList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
								</el-option>
							</el-select>
						</div>
					</div>
				</li>
				<li>
					<div class="list-info-template col-md-6">
						<label class="control-label" for="">是否展示:</label>
						<div class="control-details">
							<label><input type="radio" name="canSee1" value="true" checked v-model="dynamic.canSee">是</label>
							<label><input type="radio" name="canSee1" value="false" v-model="dynamic.canSee">否</label>
						</div>
					</div>
				</li>
				<!-- <li>
					<div class="list-info-template col-sm-12">
						<label class="control-label" for="">动态简介:</label>
						<div class="control-text" style="height: 270px"> -->
							<!--<vue-editor id="remark" v-model="dynamic.remark"></vue-editor>-->
							<!-- <quill-editor  id="remark" v-model="dynamic.remark" :options="editorOptionAdd"></quill-editor>
						</div>
					</div>
				</li> -->
				<li>
					<div class="list-info-template col-sm-12">
						<label class="control-label" for="">动态内容:</label>
						<div class="control-text" style="height: 270px">
							<!--<vue-editor id="content" v-model="dynamic.content"></vue-editor>-->
							<quill-editor  id="content" v-model="dynamic.content" :options="editorOptionAdd"></quill-editor>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="list-info-template col-sm-10" style="padding-top:20px;padding-bottom:20px;text-align:center;">
			<input type="button" class="btn checkedBtn" style="width:110px" @click="savePremises" value="保存">
			<button type="button" class="btn btn-default" style="margin-left:20px;width:110px" @click="goBack">返回</button>
		</div>
		<input type="file" id="iviewUpAdd" @change="textImageUpload" style="display: none" />
	</div>

</template>

<script>
	import {VueEditor} from 'vue2-editor'
	import calendar from "../common/calendar.vue"
	const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],

        [{'header': 1}, {'header': 2}],               // custom button values
        [{'list': 'ordered'}, {'list': 'bullet'}],
        [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
        [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
        [{'direction': 'rtl'}],                         // text direction

        [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
        [{'header': [1, 2, 3, 4, 5, 6, false]}],

        [{'color': []}, {'background': []}],          // dropdown with defaults from theme
        [{'font': []}],
        [{'align': []}],
        ['link', 'image', 'video'],
        ['clean']                                         // remove formatting button
    ]
	export default {
		data() {
			let _self = this;
			return {
                editorOption: {
                    placeholder: '请输入内容'
                },
				dynamic: {},
				premisesList: [],
				quillsDynaAdd:'',
                editorOptionAdd: {
                    placeholder: '请输入内容',
                    theme: 'snow',  // or 'bubble'
                    modules:{
                        toolbar:{
                            container: toolbarOptions,  // 工具栏
                            handlers: {
                                // handlers object will be merged with default handlers object
                                image: function (value,e) {
                                    if (value) {
                                        document.getElementById('iviewUpAdd').click()
                                        _self.quillsDynaAdd = this.quill;
                                    } else {

                                    }
                                }
                            }
                        }
                    },

                }
			}
		},
		components: {
			VueEditor,
			calendar
		},
		mounted: function() {
			this.initPremisesList();
		},
		methods: {
			savePremises(){
		    	var _self = this;
		    	if (!_self.dynamic.title) {
		    		layer.msg("请输入标题！");
		    		return;
		    	}
		    	if(!_self.dynamic.premisesId) {
		    		layer.msg("请选择楼盘！");
		    		return;
		    	}
		    	if(!_self.dynamic.canSee){
		    		layer.msg("请选择是否展示！");
		    		return;
		    	}
		    	if(!_self.dynamic.content){
		    		layer.msg("请输入动态内容！");
		    		return;
		    	}
                var url = _self.utilHelper.apiUrl+'/api/addPremisesDynamic';
                _self.$http.post(url, _self.setParams()).then((response)=>{
					var resData = response.body.resData;
					if(resData.result == "1"){
						layer.msg("保存成功");
						setTimeout(this.goBack,2000);
					}else{
						layer.msg("保存失败");
					}
				},(response)=>{
					layer.msg(response);
				});
		   },
		   initPremisesList() {
				var _self = this;
				var body={};
				body.params = {};
				var url = _self.utilHelper.apiUrl + "/api/getPremisesListByCompanyId";
				this.$http.post(url, body).then((response) => {
					var resData = response.body.resData;
					if(resData.result == "1"){
						_self.premisesList = resData.premisesList;
						
					}
				}, (response) => {
					console.log(response);
				});

			},
		   //组装待提交字段
		   setParams(){
		   		var body = {};
                body.params = {
                	id: this.$route.params.id,
                	premisesId: this.dynamic.premisesId,
                	content: encodeURIComponent(this.dynamic.content),
                	remark: encodeURIComponent(this.dynamic.remark),
                	canSee: this.dynamic.canSee,
                	title: this.dynamic.title
                }
                return body;
            },goBack(){
		   		this.$router.replace({
					path: '/premisesDynamic'
				})
			},
			textImageUpload(e){
                var _self = this;
                var files = e.target.files || e.dataTransfer.files;
                if(files[0].size > 3145728){
                    layer.msg('图片太大，请上传小于3M的图片');
                    return;
                }
                var lod = layer.load(0, {shade: [0.1,'#000']}); //弹出加载层
                var myForm = new FormData(); //创建formdata
                myForm.append("blobObject", files[0]); //想formData添加blob数据
                var url = _self.utilHelper.apiUrl + '/api/dynamicUploadBase64';
                _self.$http.post(url, myForm).then((response) => {
                    layer.closeAll('loading'); //关闭加载层
                    var data = response.body;
                    if(data.result == "1") {
                        let url = data.resData.imgName;
                        let length = _self.quillsDynaAdd.getSelection().index;
                        _self.quillsDynaAdd.insertEmbed(length, 'image', url);
                        // 调整光标到最后
                        _self.quillsDynaAdd.setSelection(length + 1);
                    } else {
                        layer.msg("图片上传失败，请重试");
                    }
                    document.getElementById("iviewUpAdd").value = '';
                    layer.close(lod);
                }, (response) => {
                    layer.msg(response);
                    layer.close(lod);
                });
			},
		}
	}
</script>

<style>
  #remark, #content{
    height: 200px;
  }
</style>